<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TAROT</title>
    <link rel="stylesheet" href="./css/normal.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/ai.css">
    <script src="./js/vue@2.js"></script>
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
</head>

<body>
    <div id="app" v-cloak>
        <t-header></t-header>
        <main class="container">
            <template v-if="!select || answer">
                <section v-if="!select && !answer">
                    <div class="top">
                        <p :class="{purple: answer}">{{title}}</p>
                        <h1>Choose Your <span>Tarot Spread</span></h1>
                        <p>Select the recommended tarot spread for a more accurate reading
                        </p>
                    </div>
                </section>
                <section v-if="answer">
                    <a class="top" :href="`./meanings_detail.html?id=${currentTarot.id}`">
                        <img style="border-radius: 10px;" :src="currentTarot.url" :alt="currentTarot.cardName">
                        <h2 style="margin-top: 10px;">{{currentTarot.cardName}}</h2>
                    </a>
                </section>
                <div v-if="answer" class="answer">
                    <div class="answer-title">
                        <div class="answer-title-avatar">
                            <img :src="currentReader.pic" :alt="currentReader.name">
                        </div>
                        <span class="answer-name">{{currentReader.name}}</span>
                    </div>
                    <p class="answer-content">
                        {{this.answerDetail}}
                    </p>
                </div>
                <div v-else class="augur">
                    <div class="augur-title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="#9253d2" stroke="#9253d2" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="tabler-icon tabler-icon-sparkles w-6 h-6 text-primary">
                            <path
                                d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z">
                            </path>
                        </svg>
                        <span>Tarot Reading</span>
                    </div>
                    <div class="augur-grid">
                        <div class="augur-grid-item" v-for="reader in augur" :key="reader.id">
                            <div class="augur-grid-item-content">
                                <div class="augur-img">
                                    <img class="augur-img_img" :src="reader.pic" :alt="reader.name">
                                </div>
                                <div class="augur-item-content">
                                    <span class="augur-name">{{reader.name}}</span>
                                    <p class="augur-detail">{{reader.desc}}</p>
                                </div>
                            </div>
                            <div class="augur-grid-item-btn" @click="handleAskQuestion(reader.id)">
                                <span>Choose This Reader</span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="select">
                <section>
                    <div class="top">
                        <h1><span>Ask Your</span></h1>
                        <h1>Tarot Question</h1>
                        <p>What would you like to know about your future?
                        </p>
                    </div>
                </section>
                <div class="ai">
                    <div class="ai-input">
                        <textarea v-model="text" name="" id="text" maxlength="300"
                            placeholder="Type your question for the Tarot reading"
                            @keyup.enter="handleGetAnswer"></textarea>
                        <button class="send" @click="handleGetAnswer">
                            <svg t="1740535344256" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="6848" id="mx_n_1740535344257" width="48"
                                height="48">
                                <path
                                    d="M512.005017 174.601899c-198.454124 0-359.338736 160.874577-359.338736 359.328702s160.884612 359.338736 359.338736 359.338736 359.328701-160.884612 359.328702-359.338736S710.449107 174.601899 512.005017 174.601899z"
                                    p-id="6849" :fill="svgBg"></path>
                                <path
                                    d="M322.030123 534.261742c2.629063-3.010378 4.595843-5.438749 6.813488-7.646359q63.719659-63.579174 127.48949-127.088106c11.4294-11.369193 16.918322-11.29895 28.417965-0.190658 24.384058 23.521083 24.404128 23.781983 0.060207 48.085765-19.065725 19.065725-38.131449 38.021069-56.504787 60.036963h252.630886c17.500328 0 20.902055 3.502073 21.072643 21.293404 0.24083 32.020383 0.24083 32.020383-32.060521 32.020383H425.958392c4.385117 4.937019 6.77335 7.897224 9.442551 10.57646 20.179564 20.249806 40.489578 40.379198 60.608935 60.699246 8.930787 9.031133 8.930787 15.934932 0.592041 24.996169-24.133194 26.250492-25.638382 26.290631-50.644586 1.35467q-57.317589-57.197174-114.645212-114.314071c-3.060551-3.040481-5.940478-6.231482-9.281998-9.823866z"
                                    :fill="svgArrow" p-id="6850"></path>
                            </svg>
                        </button>
                    </div>
                    <div class="ai-count">
                        <p>{{text.length}}/300</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="grid-item" v-for="item in questoin" @click="handleGetQuestion(item)">
                        <p>
                            <span>{{item.icon}}</span>
                            {{item.ques}}
                        </p>
                    </div>
                </div>
            </template>
            <section style="margin-top: 100px;">
                <div class="question-title">
                    <h2>Frequently Asked Questions about AI Tarot Reading</h2>
                </div>
                <div class="question">
                    <ul class="question-list">
                        <li class="question-list-item" v-for="item in question">
                            <div class="item-content">
                                <h1 class="item-content-title">{{item.title}}</h1>
                                <p class="item-content-desc">
                                    {{item.content}}
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        </main>
        <t-footer></t-footer>
    </div>
</body>

<script src="./main.js"></script>
<script type="module">
    import { moonlight, raven, river } from './js/answer.js'
    import { header, footer } from './components/index.js'
    import { meanings } from './js/cardMeanings.js'
    var vm = new Vue({
        el: '#app',
        components: {
            tHeader: header,
            tFooter: footer
        },
        data() {
            return {
                select: false,
                answer: false,
                answerDetail: '',
                text: '',
                readerId: 0,
                questionId: 0,
                currentReader: {},
                currentTarot: {},
                question: [
                    {
                        title: 'Can I repeat a reading for the same question?',
                        content: `It's not recommended to frequently repeat free tarot reading for the same question. Each reading represents the energy state at that moment, and frequent repetition may lead to confusion. We suggest conducting another AI tarot reading when there's a significant change in your situation to gain new insights.`
                    },
                    {
                        title: 'What should I pay attention to before a tarot reading?',
                        content: `Before starting an online tarot reading, we recommend finding a quiet environment and maintaining a calm mindset. Clarify the question you want to ask and keep an open mind to receive guidance from the tarot cards. Remember, AI tarot reading is a tool for self-exploration and reflection, and the final decision rests with you.`
                    },
                    {
                        title: 'Can tarot cards predict the future?',
                        content: `Divination primarily reflects the current energy state and possible development trends, rather than definite future predictions. It provides guidance and insights to help you better understand your current situation and potential opportunities. The future remains in your hands through your choices and actions.`
                    },
                    {
                        title: 'Are there any taboos or limitations in tarot card reading?',
                        content: 'For ethical and legal reasons, our AI tarot reading system does not answer sensitive questions about life safety, major disease diagnoses, legal disputes, or financial investments. Please consult relevant professionals for these matters. Online tarot reading are mainly used for personal growth and self-awareness exploration.'
                    },
                    {
                        title: 'Are online tarot card results accurate? How to correctly interpret the reading results?',
                        content: 'The accuracy of AI tarot reading results depends on multiple factors, including the quality of your question and personal understanding. We suggest viewing the reading results as a reference and reflection tool, rather than absolute truth. Combine the results with your specific situation, deeply consider the symbolic meaning of the cards, and extract valuable insights. Remember, tarot cards are a tool to stimulate intuition and self-awareness, and the final interpretation is up to you.'
                    }
                ],
                augur: [
                    {
                        id: 0,
                        name: 'Moonlight Yao',
                        pic: './imgs/moonyao_tarot.png',
                        desc: 'A gentle, dreamy novice Tarot reader, guiding starlight for the lost. Come here to heal your soul if you seek tender care.',
                        answer: moonlight
                    },
                    {
                        id: 1,
                        name: 'Raven',
                        pic: './imgs/enigmatic_tarot_artist.png',
                        desc: 'An enigmatic tarot artist. Creativity flows like the tides, insight sharp as a blade. Those yearning for their inner selves to be truly seen should seek him out.',
                        answer: raven
                    },
                    {
                        id: 2,
                        name: 'Stella Rivers',
                        pic: './imgs/linxinghe_tarot.jpeg',
                        desc: 'Owner of the Starry Night Cafe, tucked away in a hidden city alley. Uses aromatic coffee and mystical tarot to guide lost souls towards their path.',
                        answer: river
                    }
                ],
                questoin: [
                    {
                        id: 0,
                        icon: '🌙',
                        ques: "Is this relationship truly over? Tarot reveals hidden hope..."
                    },
                    {
                        id: 1,
                        icon: '⭐',
                        ques: "They left my texts on read – what's really going on?"
                    },
                    {
                        id: 2,
                        icon: '🔮',
                        ques: "Silent treatment over 7 days! Will they cave first?"
                    },
                    {
                        id: 3,
                        icon: '✨',
                        ques: "New year career switch: Where will my breakthrough come?"
                    }
                ]
            }
        },
        computed: {
            title() {
                return this.answer ? 'Tarot Reading' : 'Online Tarot Reading'
            },
            svgBg() {
                return this.text.length > 0 ? '#9353d3' : '#36363b'
            },
            svgArrow() {
                return this.text.length > 0 ? '#ffffff' : '#747478'
            }
        },
        created() {

        },
        methods: {
            handleGetAnswer() {
                const answerArr = this.augur[this.readerId].answer[this.questionId].answer
                this.answerDetail = answerArr[Math.floor(Math.random() * answerArr.length)];
                this.currentTarot = meanings[Math.floor(Math.random() * meanings.length)]
                this.answer = true
                this.select = false
            },
            handleAskQuestion(readerId) {
                this.select = true
                this.readerId = readerId
                this.currentReader = this.augur[this.readerId]
            },
            handleGetQuestion(item) {
                this.questionId = item.id
                this.text = item.ques
            }
        }
    })
</script>

</html>